<script setup>
import Dialog from "@/components/Dialog.vue";
import { ref } from "vue";
import { physicalHealthDetail } from "../../../../api";

const props = defineProps(["visible", "title"]);

const emits = defineEmits(["close"]);

const list = ref([]);

async function handleOpen() {
  const { data } = await physicalHealthDetail({ year: 2024 });
  list.value = data;
}
</script>

<template>
  <Dialog
    :visible="props.visible"
    :title="props.title"
    @open="handleOpen"
    @close="
      () => {
        emits('close');
      }
    "
  >
    <div class="box">
      <div class="box-c">
        <div class="box-c-c">
          <div class="box-c-c-c1">
            <span class="item1">年份</span>
            <span class="item2">地区名称</span>
            <span class="item1">优秀率</span>
            <span class="item1">良好率</span>
            <span class="item1">及格率</span>
            <span class="item1">不及格率</span>
            <span class="item1">优良率</span>
          </div>
          <div class="box-c-c-c2">
            <div
              class="box-c-c-c2-c"
              v-for="(item, index) in list"
              :key="index"
            >
              <div class="item1">{{ item.year }}</div>
              <div class="item2">{{ item.name }}</div>
              <div class="item1">{{ item.a }}</div>
              <div class="item1">{{ item.b }}</div>
              <div class="item1">{{ item.c }}</div>
              <div class="item1">{{ item.d }}</div>
              <div class="item1">{{ item.e }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </Dialog>
</template>

<style lang="less" scoped>
.item1 {
  width: 15%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.item2 {
  width: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.box {
  width: 100%;
  height: 100%;
  display: flex;
  .box-c {
    width: 100%;
    height: 100%;
    padding: 0.625rem;
    .box-c-c {
      width: 100%;
      height: 99%;
      display: flex;
      flex-direction: column;
      .box-c-c-c1 {
        width: 100%;
        height: 6%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 0.625rem 0 0.625rem;
        margin-bottom: 0.1rem;
        font-size: 1rem;
        color: #c9e9f8;
      }
      .box-c-c-c2 {
        width: 100%;
        flex: 1;
        overflow: auto;
        .box-c-c-c2-c {
          width: 100%;
          height: 6%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 0.625rem 0 0.625rem;
          margin-bottom: 0.1rem;
          background: rgba(255, 255, 255, 0.1);
          font-size: 1rem;
          color: #ffffff;
          &:nth-child(2n + 1) {
            background: rgba(255, 255, 255, 0.05);
          }
        }
      }
    }
  }
}
</style>
